<template>
  <div class="echarts">
    <div id="bar"></div>
  </div>
</template>
  <script>
import * as echarts from "echarts";
import axios from "axios";
import formater from 'time-formater'
export default {
  name: "searchmap",
  data() {
    return {
      dateList: [],
      listData: [[], [], []],
    };
  },
  mounted() {
    for(var i=6;i>-1;i--){
      let time = formater(new Date().getTime() - 86400000*i).format('YYYY-MM-DD')
      this.dateList.push(time)
    }
    this.$nextTick(() => {
      this.init();
      this.ldainit();
    });
  },
  methods: {
    init() {
      var chartDom = document.getElementById("bar");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ["#5470c6","#e5323e","#655535"],
        title: {
          text: "走势图",
          subText: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["新注册用户", "新增订单", "新增管理员"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.dateList,
          boundaryGap: false,
        },
        yAxis: [
          {
            type:"value",
            name:"用户",
            max:200,
            min:0,
            axisLine:{
              show :true
            }
          },
          {
            type:"value",
            name:"订单",
            max:200,
            min:0,
            axisLine:{
              show :true
            }
          }
        

        ],
        series: [
          {
            name: "新注册用户",
            type: "line",
            data: this.listData[0],
            markPoint: {
              data: [{
                type: "max",
                name: "Max"
              }, {
                type: "min",
                name: "Min"
              }]
            },
          },
          {
            name: "新增订单",
            type: "line",
            data: this.listData[1],
            markPoint: {
              data: [{
                type: "max",
                name: "Max"
              }, {
                type: "min",
                name: "Min"
              }]
            },
          },
          {
            name: "新增管理员",
            type: "line",
            data: this.listData[2],
            markPoint: {
              data: [{
                type: "max",
                name: "Max"
              }, {
                type: "min",
                name: "Min"
              }]
            },
          },
        ],
      };

      option && myChart.setOption(option);
      window.onresize= ()=>{
        option && myChart.resize()
      }
    },
    ldainit() {
      this.dateList.forEach((item) => {
        axios
          .get(`https://elm.cangdu.org/statis/user/${item}/count`)
          .then((res) => {
            this.listData[0].push(res.data.count);
          });
        axios
          .get(`https://elm.cangdu.org/statis/order/${item}/count`)
          .then((res) => {
            this.listData[1].push(res.data.count);
          });
        axios
          .get(`https://elm.cangdu.org/statis/admin/${item}/count`)
          .then((res) => {
            this.listData[2].push(res.data.count);
          });
      });
    },
  },
  watch: {
    listData(val) {
      this.init();
    },
  },
};
</script>
  <style scoped>
#bar {
  width: 70%;
  height: 500px;
}
</style>
  